<template>
<!-- <up-button icon="plus" text="添加新汉服" @click="goTo('/pagesub/goods/add')"></up-button> -->
<u-tabs :list="tabs" :itemStyle="{width: '50%', height: '88rpx'}" @click="tabHandle"></u-tabs>
<view class="fixedArea">
	<view class="fixedBtn flex-rcc search" @tap="calcHanfuMoney" v-if="goods.list.length>0">成本</view>
	<view class="fixedBtn flex-rcc add" @tap="show = true">
		<u-icon name="search" color="#fff" size="56rpx"></u-icon>
	</view>
	<view class="fixedBtn flex-rcc add" @tap="goTo('/pagesub/goods/add')">
		<u-icon name="plus" color="#fff" size="56rpx"></u-icon>
	</view>
</view>
<u-collapse accordion>
    <u-collapse-item
	    v-for="item in list"
		:title="item.name"
		:name="item.timestamp"
		:value="dynastyFilter(item.dynasty)"
		:label="$u.timeFormat(item.timestamp, 'yyyy年mm月dd日 hh:MM:ss')"
    >
		<view class="flex">
			<up-image :show-loading="true" :src="item.imgUrl" width="160rpx" height="160rpx"></up-image>
			<view class="rightCon">
				<!-- <u-cell-group></u-cell-group> -->
				<u-cell title="买入价格" :value="item.buyPrice"></u-cell>
				<u-cell title="建议租赁价格" :value="item.rentalPrice"></u-cell>
				<u-cell title="备注" :value="item.remark"></u-cell>
			</view>
		</view>
		<view class="btnGroup">
			<up-button
				plain 
				class="btn" 
				type="warning" 
				icon="edit-pen" 
				text="编辑" 
				@click="editGoods(item)"
				:disabled="item.state===1"
			></up-button>
			<up-button 
				class="btn" 
				type="error" 
				icon="trash" 
				text="删除" 
				@click="deleteGoods(item)"
			></up-button>
		</view>
    </u-collapse-item>
</u-collapse>
<u-empty 
	v-if="list.length===0" 
	text="您还没有一件汉服请点 + 添加"
	mode="order" 
	icon="http://cdn.uviewui.com/uview/empty/car.png"
	marginTop="200rpx"
></u-empty>
<u-picker 
	:defaultIndex="defaultIndex"
	v-if="show"
	:show="show" 
	:columns="columns" 
	visibleItemCount="8"
	keyName="name" 
	@confirm="cfmHandle"
	@cancel="show = false"
></u-picker>
</template>

<script setup>
import { useGoodsStore } from '@/stores'
import { goTo } from '@/utils/helper'
import { dynasty, dynastyFilter } from '@/utils/data'
import { sumBy } from 'lodash-es'

const goods = useGoodsStore()
const show = ref(false) // 汉服类型过滤选择picker
const list = ref([])
const defaultIndex = ref([0])
const evt =  reactive({
	state: 0,
	type: 0,
})

const columns = [ [{id: 0, name: '全部'}, ...dynasty] ]
const tabs = [
	{id: 0, name: '正常'},
	{id: 1, name: '已售'}
]
watch(goods.list, listFilter, { immediate: true })

function listFilter(li){
	list.value = li.filter(item=>{
		const fir = (Boolean(item.state)===Boolean(evt.state))
		return evt.type===0 ? fir : (fir&&item.dynasty===evt.type)
	})
}
function tabHandle({index}){
	evt.state = index
	evt.type = 0
	defaultIndex.value = [0]
	listFilter(goods.list)
}
function cfmHandle({indexs, value}){
	// console.log(1111, indexs, value[0])
	show.value = false
	defaultIndex.value = indexs
	evt.type = value[0].id
	listFilter(goods.list)
}
function deleteGoods({name, timestamp}){
	uni.showModal({
		title: '温馨提示',
		content: `请确认是否要删除当前名为“${name}”的汉服？`,
		success(res){
			if (res.confirm) {
				goods.deleteGoods(timestamp)
			}
		}
	})
}
function editGoods(item){
	goods.setEditTmp(item)
	goTo('/pagesub/goods/add')
}
function calcHanfuMoney(){
	let normlArr = [], soldArr = [];
	for(let item of goods.list){
		if(Boolean(item.state)){ // 已售
			soldArr.push(item)
		}else{
			normlArr.push(item)
		}
	}
	const normalCost = Number(sumBy(normlArr, (item)=>Number(item.buyPrice)).toFixed(2))
	const soldCost = Number(sumBy(soldArr, (item)=>Number(item.buyPrice)).toFixed(2))
	uni.showModal({
		title: '您的汉服成本计算结果',
		content: `您的汉服总共有${goods.list.length}件, 成本为${normalCost+soldCost}元; 
已售汉服${soldArr.length}件, 成本为${soldCost}元; 
剩余汉服${normlArr.length}件, 成本为${normalCost}元;`,
		showCancel: false,
	})
}
</script>

<style lang="scss" scoped>
.fixedArea{
	position: fixed;
	bottom: 50rpx;
	right: 20rpx;
	z-index: 2;
	.fixedBtn{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		box-shadow: 0 0 10rpx #ccc;
		color: #fff;
		margin-top: 20rpx;
	}
	.add{
		background-color: #2979ff;
	}
	.search{
		background-color: #666666;
	}
}
.rightCon{
	flex: 1;
	margin-left: 20rpx;
}
.btnGroup{
	width: 100%;
	display: flex;
	justify-content: flex-end;
	padding-top: 10rpx;
	.btn{
		width: 200rpx!important;
		// margin-left: 20rpx;
	}
}
</style>